<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闲鱼风格搜索界面</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="css/kuding.css">
</head>
<body>
<div class="search-container">
    <!-- 搜索框区域 -->
    <div class="search-box">
        <input type="text" id="search-input" placeholder="搜索你想要的宝贝...">
        <button id="search-btn">搜索</button>
    </div>

    <!-- 搜索下拉面板（默认隐藏，点击搜索框显示） -->
    <div class="search-dropdown" id="search-dropdown">
        <!-- 历史搜索 -->
        <div class="dropdown-section">
            <h3 class="section-title">历史搜索</h3>
            <ul class="history-list" id="history-list">
                <li class="history-item" onclick="goToResult('二手笔记本电脑')">二手笔记本电脑</li>
                <li class="history-item" onclick="goToResult('闲置连衣裙')">闲置连衣裙</li>
                <li class="history-item" onclick="goToResult('家用咖啡机')">家用咖啡机</li>
                <li class="history-item" onclick="goToResult('考研真题')">考研真题</li>
            </ul>
        </div>

        <!-- 推荐搜索 -->
        <div class="dropdown-section">
            <h3 class="section-title">大家都在搜</h3>
            <ul class="recommend-list" id="recommend-list">
                <li class="recommend-item" onclick="goToResult('二手手机')">二手手机</li>
                <li class="recommend-item" onclick="goToResult('露营装备')">露营装备</li>
                <li class="recommend-item" onclick="goToResult('儿童绘本')">儿童绘本</li>
                <li class="recommend-item" onclick="goToResult('厨房小家电')">厨房小家电</li>
            </ul>
        </div>
    </div>
</div>

<!-- 搜索结果页面（默认隐藏） -->
<div class="result-page" id="result-page" style="display: none;">
    <div class="back-btn" onclick="goBack()">← 返回搜索</div>
    <h2 class="result-title" id="result-title">搜索结果：</h2>
    <p class="result-tip">点击历史/推荐项后，此处会显示对应关键词的搜索结果（实际项目中需对接后端接口）</p >
</div>

<!-- JavaScript 逻辑 -->
<script src="js/ersou.js">
    // // 搜索框点击显示下拉面板
    // const searchInput = document.getElementById('search-input');
    // const searchDropdown = document.getElementById('search-dropdown');
    // const searchContainer = document.querySelector('.search-container');
    // const resultPage = document.getElementById('result-page');
    //
    // searchInput.addEventListener('focus', () => {
    //     searchDropdown.style.display = 'block';
    // });
    //
    // // 点击页面其他区域隐藏下拉面板
    // document.addEventListener('click', (e) => {
    //     if (!searchContainer.contains(e.target)) {
    //         searchDropdown.style.display = 'none';
    //     }
    // });
    //
    // // 跳转到搜索结果页面
    // function goToResult(keyword) {
    //     const resultTitle = document.getElementById('result-title');
    //     resultTitle.textContent = `搜索结果：${keyword}`;
    //     searchContainer.style.display = 'none';
    //     resultPage.style.display = 'block';
    // }
    //
    // // 返回搜索页面
    // function goBack() {
    //     resultPage.style.display = 'none';
    //     searchContainer.style.display = 'block';
    // }
    //
    // // 搜索按钮逻辑
    // const searchBtn = document.getElementById('search-btn');
    // searchBtn.addEventListener('click', () => {
    //     const keyword = searchInput.value.trim();
    //     if (keyword) {
    //         goToResult(keyword);
    //         // 实际项目中可在此处添加“添加到历史搜索”逻辑
    //     }
    // });
</script>
</body>
</html>
